<!-- 事件绑定指令 v-on:简写@ -->

<script setup lang="ts">
import { ref } from 'vue'

const food = ref('苹果')

const myfood = () => {
  food.value = '葡萄'
}

const myfood2 = (foods: string) => {
  food.value = foods
  alert(foods)
}

const mydefault = (e: any, myfoods: string) => {
  console.log(e)
  console.log(myfoods)
}
</script>

<template>
  <!-- 内联语句 -->
  <button v-on:click="food = '香蕉'">我是内联语句:{{ food }}</button>

  <!-- 函数 -->
  <button @click="myfood">我是函数:{{ food }}</button>

  <!-- 函数传参 -->
  <button @click="myfood2('我喜欢吃猪脚饭')">我是函数传参:{{ food }}</button>

  <!-- 默认事件函数 -->
  <!-- 事件触发时,浏览器会默认传递一个(事件参数)给函数,内部有很多信息
  触发事件时,如果既要获取到默认的事件参数,又需要获取到自定义的参数,有且只能使用$event来代替事件参数 -->
  <button @click="mydefault($event, '我只是一个孤独的人')">我是默认参数</button>
</template>

<style scoped>
img {
  width: 300px;
  height: 300px;
}
</style>
